<template>
	<view>
		<u-sticky bg-color="#fff">
			<view class="balance">
				<view v-if="dayTyps == 1" class="balance_top">
					<u-icon name="arrow-left" @click="changeDate(1)"></u-icon>
					<text>{{date}}</text>
					<u-icon name="arrow-right" @click="changeDate(2)"></u-icon>
				</view>
				<view v-else class="balance_top" @click="show=true">
					{{startDate}} ~ {{endDate}}
				</view>
				<view class="selectDate" @click="selectDateChange">
					<u--text prefixIcon="calendar" iconStyle="font-size: 19px" :text="selectDateMsg"></u--text>
					<u-calendar :show="show" :mode="mode" :defaultDate="defaultDateA" :min-date="minDate"
						:max-date="defaultDate" :maxRange="30" :monthNum="7" :rangePrompt="rangeMsg" @confirm="confirm"
						@close="show = false"></u-calendar>
				</view>
			</view>
			<view class="total">
				<view class="top">
					当前账号余额
					<text>截止当日24时</text>
				</view>
				<view class="total_money">
					<u--text prefixIcon="rmb" align="center" size="20" iconStyle="font-size: 20px" bold
						:text="totalData.after"></u--text>
				</view>
				<view class="bottom">
					<view class="left" :class="[balanceType == 1 ? 'active' : '']" @click="balanceTypeChange(1)">
						收入:<text style="padding-left: 15rpx;">{{totalData.income}}</text>
					</view>
					<view class="right" :class="[balanceType == 2 ? 'active' : '']" @click="balanceTypeChange(2)">
						支出:<text style="padding-left: 15rpx;">{{totalData.expend}}</text>
					</view>
				</view>
			</view>
		</u-sticky>
		<view v-if="counts > 0" class="cards">
			<view v-if="item.total.total*100 > 0" class="lists" v-for="(item, index) in productTotalData" :key="index">
				<view class="lists-item">
					<view class="top">
						<view class="title">
							<text>{{item.name}}</text>
						</view>
						<view class="totals">
							<text>{{item.total.total}}</text>
							<text class="bit"></text>
						</view>
					</view>
					<view v-if="item.balanceTypeNums > 0" class="item-main">
						<view class="item-main-list" v-for="(items, indexs) in item.balanceTypeData" :key="indexs">
							<view class="list-title" @click="details(items)">
								<view class="left">
									{{items.name}}<text></text>
								</view>
								<view class="right">
									<text>{{items.total}}</text>
									<u-icon name="arrow-right-double"></u-icon>
								</view>
							</view>
							<view class="list-content">
								<view class="content-items-title" v-for="(itemd, indexd) in items.moneyTypeData"
									:key="indexd">
									<view class="left">
										{{itemd.money_type}}<text></text>
									</view>
									<view class="right">
										<text>{{itemd.total}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="list" text="没有收益哦" icon="/static/Empty/msglist_null.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				counts: 0,
				totalData: {},
				productTotalData: [],
				type: 0,
				defaultDate: null,
				defaultDateA: [],
				date: null,
				minDate: null,
				balanceType: 1,
				selectDateMsg: '范围选择',
				startDate: '',
				endDate: '',
				dayTyps: 1,
				mode: 'range',
				userinfo: {},
				rangeMsg: '选择天数不能超过31天'
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			var _date = new Date();
			this.defaultDate = _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate()
			this.date = this.getNextDate(this.defaultDate, -1)
			this.defaultDate = this.date
			this.getMaxMinData()
			this.loadTotal()
			this.loadData()
		},
		methods: {
			// 前一天/后一天 操作
			changeDate(e) {
				this.type = e
				if (e == 1) {
					this.date = this.getNextDate(this.date, -1)
					this.loadTotal()
					this.loadData()
				}
				if (e == 2) {
					if (this.defaultDate != this.date) {
						let dates = this.getNextDate(this.date, 1)
						this.date = dates
						this.loadTotal()
						this.loadData()
					}
				}
			},
			// 获取统计
			async loadTotal() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'balance/getAccountDayTotal',
					data: {
						type: this.type,
						date: this.date,
						dayTyps: this.dayTyps
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null) {
						this.totalData = res.data
					}
				}
			},
			// 获取数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Datas/getProductDayIncome',
					data: {
						date: this.date,
						typs: this.balanceType,
						dayTyps: this.dayTyps
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				if (res.code == 1) {
					this.counts = res.data.counts
					this.productTotalData = res.data.product
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: "none"
					});
				}
			},
			// 详情
			details(item) {
				uni.navigateTo({
					url: '/pages/version5/mine/account/account_detail?pid=' + item.proid + '&isChg=' + item.isChg +
						'&dates=' + this.date + '&name=' + item.name + '&typs=' + item.typs + '&dayTyps=' + this.dayTyps
				})
			},
			// 获取下一天
			getNextDate(date, day) {
				var dd = new Date(date);
				dd.setDate(dd.getDate() + day);
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 收入支出切换
			balanceTypeChange(type) {
				if (this.balanceType != type) {
					this.balanceType = type
					this.counts = 0
					this.productTotalData = []
					this.loadData()
				}
			},
			// 切换选择日期类型
			selectDateChange() {
				if (this.dayTyps == 1) {
					this.show = true
				} else {
					this.selectDateMsg = "范围选择"
					this.dayTyps = 1
					this.date = this.defaultDate
					this.productTotalData = []
					this.totalData = {}
					this.counts = 0
					this.loadTotal()
					this.loadData()
				}
			},

			// 选择日期
			confirm(e) {
				this.defaultDateA = e
				var index = e.length
				this.startDate = e[0]
				this.endDate = e[index - 1]
				this.selectDateMsg = "单日选择"
				this.dayTyps = 2
				this.show = false
				this.date = this.startDate + "_" + this.endDate
				this.productTotalData = []
				this.totalData = {}
				this.counts = 0
				this.loadTotal()
				this.loadData()
			},
			// 获取最大最小日期
			async getMaxMinData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Datas/getMaxMinData',
					data: {
						type: this.type,
						date: this.date
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.minDate = res.data.minDate
					this.maxDate = res.data.maxDate
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.balance {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		align-items: center;
		border-bottom: 1px dashed #eee;
		background-color: #eee;

		.balance_top {
			display: flex;
			justify-content: space-between;

			text {
				margin: 0 30rpx;
				font-size: 28rpx;
				color: #666666;
			}
		}

		.selectDate {
			font-size: 24rpx;
		}
	}

	.total {
		padding: 0 30rpx;

		.top {
			position: relative;
			font-size: 24rpx;
			text-align: center;
			color: #999;

			text {
				position: absolute;
				padding-left: 15rpx;
				color: #eee;
			}
		}

		.total_money {
			display: flex;
			line-height: 108rpx;
		}

		.bottom {
			display: flex;
			padding-bottom: 20rpx;
			color: #999;

			view {
				width: 50%;
				font-size: 24rpx;
			}

			.left {
				padding-left: 10rpx;
			}

			.right {
				padding-right: 10rpx;
				text-align: right;
			}

			.active {
				color: #2979ff;
				font-weight: bold;
			}
		}
	}

	.cards {
		padding: 30rpx;

		.lists {
			background-color: #ffffff;
			box-sizing: border-box;
			margin-bottom: 15px;
			border-radius: 7px;
			box-shadow: 7px 5px 30px -18px #888888;

			.lists-item {
				padding: 0 20rpx;

				.top {
					padding: 30rpx 0;
					width: 100%;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #eee;

					.title {
						text {
							font-size: 30rpx;
							font-weight: bold;
							padding-left: 10rpx;
						}
					}

					.totals {
						font-weight: bold;
						color: #ff7307;

						.bit {
							padding-left: 10rpx;
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.item-main {
					padding: 20rpx 0;

					.item-main-list {
						border: 1px solid #eee;
						border-radius: 10rpx;
						margin: 0rpx 0 20rpx 0;

						.list-title {
							display: flex;
							justify-content: space-between;
							padding: 20rpx;
							font-size: 26rpx;
							border-bottom: 1px dashed #eee;

							.left {
								font-weight: bold;
							}

							.right {
								display: flex;

								text {
									padding-right: 10rpx;
								}
							}
						}

						.list-content {
							padding: 0 20rpx;

							.content-items-title {
								display: flex;
								justify-content: space-between;
								padding: 20rpx;
								font-size: 26rpx;
							}

							.top_line {
								border-top: 1px dashed #eee;
							}
						}
					}
				}
			}
		}
	}
</style>